<script setup lang="ts">
const options = [
  {
    id: 1,
    imgurl:
      "https://lanhu-oss-2537-2.lanhuapp.com/SketchPngd54944d854b1f7630bf6f3b8af6a8926aeda2ce8face92b35e01f13e03b4c64c?noCache=true",
    title: "定制化品牌全案",
    attrs: [
      "创意设计服务全案定制",
      "一站式海外短视频营销",
      "打造品牌与受众双向互动",
      "长效关联的营销阵地",
    ],
    flex: "left",
  },
  {
    id: 2,
    imgurl:
      "https://lanhu-oss-2537-2.lanhuapp.com/SketchPnge1e02d1adce09fa6847121c465179feba9a046b4a666aa22ac26704e6a996d23?noCache=true",
    title: "增量广告投放",
    attrs: [
      "覆盖200+国家及75种语言",
      "多场景短视频广告投放优化",
      "迅速直接转化",
      "提高沉淀品牌价值",
    ],
    flex: "right",
  },
  {
    id: 3,
    imgurl:
      "https://lanhu-oss-2537-2.lanhuapp.com/SketchPngbfdefea9eae67cfc0143be461f9e99fd2e5e30bdffa97eeef13681f4958e86f6?noCache=true",
    title: "一站式KOL直播运营",
    attrs: [
      "直连全球20万+KOL",
      "精准匹配契合产品网红",
      "病毒式裂变传播+直播",
      "对粉丝进行沉浸式种草",
    ],
    flex: "left",
  },
]
</script>

<template>
  <div class="tiktok">
    <h1>{{ $t(`tiktok.覆盖TikTok全生态服务 让品牌和产品一夜爆红`) }}</h1>
    <div class="card" v-for="item in options" :key="item.id">
      <div class="card-body" v-if="item.flex === 'left'">
        <img :src="item.imgurl" alt="" />
        <div class="content-body content-body-l">
          <h2>{{ $t(`tiktok.${item.title}`) }}</h2>
          <div class="tags">
            <p v-for="(is, key) in item.attrs" :key="key">
              {{ $t(`tiktok.${is}`) }}
            </p>
          </div>
        </div>
      </div>
      <div class="card-body" v-if="item.flex === 'right'">
        <div class="content-body content-body-r">
          <h2>{{ $t(`tiktok.${item.title}`) }}</h2>
          <div class="tags">
            <p v-for="(is, key) in item.attrs" :key="key">
              {{ $t(`tiktok.${is}`) }}
            </p>
          </div>
        </div>
        <img :src="item.imgurl" alt="" />
      </div>
    </div>
  </div>
</template>

<style scoped>
.tiktok {
  height: 1590px;
  background: #f7f8fa;
  padding-top: 90px;
}
h1 {
  width: 583px;
  height: 40px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 28px;
  color: #27272f;
  line-height: 40px;
  text-align: center;
  font-style: normal;
  margin: 0 auto;
  margin-bottom: 74px;
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 溢出显示省略号 */
}
.card {
  width: 1168px;
  height: 408px;
  background: #ffffff;
  border-radius: 8px;
  margin: 0 auto;
  margin-bottom: 26px;
}
.card-body {
  width: 100%;
  height: 100%;
  padding: 0 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-body img {
  max-width: 425px;
  object-fit: cover;
}
.content-body {
  width: 416px;
  height: 154px;
}
.content-body h2 {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 19px;
  color: #27272f;
  line-height: 26px;
  text-align: left;
  font-style: normal;
}
.tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.tags p {
  width: 196px;
  height: 40px;
  background: #f5f6f9;
  border-radius: 26px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  line-height: 40px;
  font-size: 14px;
  color: rgba(2, 2, 2, 0.75);
  text-align: center;
  font-style: normal;
  margin-top: 24px;
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 溢出显示省略号 */
}
.content-body-l {
}
.content-body-r {
}
</style>
